<template>
	<div  > 
		<a-row  class='main'>
			<breadcrumbs v-if='!Global.currentDevice'></breadcrumbs>
			<div  class='pt30'>
				<span  class='ft20 fontWeight span_title'>{{AllData.introduce.title}}</span>  
				<ul  class='method_list  mt12'>
					<li style="font-size: 16px;"  v-for='(item,index) in AllData.introduce.content' :key='index'> <i class='method_list_head'></i>{{item}}</li> 
				</ul>
			</div> 
			<ul  class='card-list pt30'>
				<li  v-for='(item,index) in AllData.introduce.advantage' :key='index'>
					<div  class='card-list_title ' :class='item.class'>{{item.title}}</div>
					<div  class='list_title-small'>{{item.sim}}</div>
					<p>
						{{item.content}}
					</p>
				</li>
			</ul>
		</a-row>
		<div  v-if='userlogin'>
			<a-row class='bg-white'>
				<a-row  class='main' :style='{paddingBottom: Global.currentDevice? "80px":"228px"}'>
					<div  class='  modal_introduce   relative'>
						<span  class='ft20 fontWeight span_title'>{{AllData.modal.title}}</span> 
						<!-- pc-introduce s-->
						<div  v-if='!Global.currentDevice'>
							<ul  class='financing_modal'  style="padding-top: 74px;">
								<li>
									<i  class='left_num'>1</i>
									<span class='left_top  top'>{{AllData.modal.one}}</span>
								</li>
								<li>
									<i  class='left_num'>2</i>
									<span class='left_top  bottom'>{{AllData.modal.two}}</span>
								</li>
								<li>
									<i  class='left_num'>3</i>
									<span class='left_top  top'>{{AllData.modal.three}}</span>
								</li>
								<li>
									<i  class='left_num'>4</i>
									<span class='left_top  bottom'>{{AllData.modal.four}}</span>
								</li>
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul> 
							<ul  class='financing_modal'>
								<li  style="border-left:2px solid  #2E4E7E;">
									<i  class='left_num'>8</i>
									<span class='left_top  top'>{{AllData.modal.eight}}</span>
								</li>
								<li>
									<i  class='left_num'>7</i>
									<span class='left_top  bottom'>{{AllData.modal.seven}}</span>
								</li>
								<li>
									<i  class='left_num'>6</i>
									<span class='left_top  top'>{{AllData.modal.six}}</span>
								</li>
								<li>
									<i  class='left_num'>5</i>
									<span class='left_top  bottom'>{{AllData.modal.five}}</span>
								</li>
								<li></li>
							</ul> 
							<ul  class='financing_modal'>
								<li >
									<i  class='left_num'>9</i>
									<span class='left_top  top'>{{AllData.modal.nine}}</span>
								</li>
								<li>
									<i  class='left_num'>10</i>
									<span class='left_top  bottom'>{{AllData.modal.ten}}</span>
								</li>
								<li>
									<i  class='left_num'>11</i>
									<span class='left_top  top'>{{AllData.modal.eleven}}</span>
								</li>
								<li> </li>
								<li></li>
							</ul>
						</div>
						<!-- pc-introduce e-->
						<!-- mobile-introduce s -->
						<div  v-else>
							<ul  class='financing_modal'  style="padding-top: 74px;">
								<li>
									<i  class='left_num'>1</i>
									<span class='left_top  top'>{{AllData.modal.one}}</span>
								</li>
								<li>
									<i  class='left_num'>2</i>
									<span class='left_top  bottom'>{{AllData.modal.two}}</span>
								</li>
								
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul> 
							<ul  class='financing_modal'>
								<li style="border-left:2px solid  #2E4E7E;">
									<i  class='left_num'>4</i>
									<span class='left_top  bottom'>{{AllData.modal.four}}</span>
								</li>
								<li>
									<i  class='left_num'>3</i>
									<span class='left_top  top'>{{AllData.modal.three}}</span>
								</li> 
								<li></li>
							</ul>
							<ul  class='financing_modal'> 
								<li>
									<i  class='left_num'>5</i>
									<span class='left_top top'>{{AllData.modal.five}}</span>
								</li>
								<li >
									<i  class='left_num'>6</i>
									<span class='left_top  bottom'>{{AllData.modal.six}}</span>
								</li> 
								<li style="border-right:2px solid  #2E4E7E;"></li>
							</ul> 
							<ul  class='financing_modal'>
								<li  style="border-left:2px solid  #2E4E7E;">
									<i  class='left_num'>8</i>
									<span class='left_top bottom '>{{AllData.modal.eight}}</span>
								</li>
								<li>
									<i  class='left_num'>7</i>
									<span class='left_top top '>{{AllData.modal.seven}}</span>
								</li>
								<li></li>
							</ul>
							<ul  class='financing_modal'>
								<li >
									<i  class='left_num'>9</i>
									<span class='left_top  top'>{{AllData.modal.nine}}</span>
								</li>
								<li>
									<i  class='left_num'>10</i>
									<span class='left_top  bottom'>{{AllData.modal.ten}}</span>
								</li>
								<li style="border-right:2px solid  #2E4E7E;"></li> 
							</ul>
							<ul class='financing_modal'>
								<li>
									<i  class='left_num'>11</i>
									<span class='left_top  top'>{{AllData.modal.eleven}}</span>
								</li>
								<li></li>
							</ul>
						</div>
						<!-- mobile-introduce e -->
						<img  :src='AllData.modal.imgsrc' width="1200"  class='absolute' style="bottom: -228px;left:0;"  :style='{bottom:Global.currentDevice? "-60px":"-228px"}'>
					</div> 
				</a-row>
			</a-row>
			<a-row  class='main'>
				<div  :class='{mt50:!Global.currentDevice,mt20:Global.currentDevice}'>
					<span  class='ft20 fontWeight span_title'>{{AllData.cost.title}}</span>  
					<ul  class='mt20 clear financing_cost'>
						<li v-for='(item,index) in AllData.cost.content' :key='index'>{{item}}</li> 
					</ul>
				</div>	
				<div  :class='{mt50:!Global.currentDevice,mt20:Global.currentDevice}'  v-for='(item,index) in AllData.case' :key='index'>
					<span  class='ft20 fontWeight span_title'>{{item.title}}</span> 
					<ul class='caseEg clear'>
						<li v-for='(it,index) in item.content' :key='index' :style="{background:index==item.content.length-1? 'none':''}">{{it}}</li> 
					</ul>
				</div>
				<!-- <div  :class='{mt50:!Global.currentDevice,mt20:Global.currentDevice}'  >
					<span  class='ft20 fontWeight span_title'>案例二</span> 
					<ul class='caseEg clear'>
						<li>1.德国R公司通过我公司的介绍向中国L公司采购窗帘布。</li>
						<li>2.中国L公司无进出口权，是生产厂家。</li>
						<li>3.L公司与德国R公司公司确认订单细节，付款期限90天。</li>
						<li>4.L公司与我方境内公司签订贸易合同，R公司也与我方（香港）公司签订贸易合同。</li>
						<li>5.L公司供货，我方公司在R公司确权后将货款支付给A公司。</li>
						<li>6.R公司根据合同在账期到期日付款给我公司。</li>
						<li style="background: none;">7.L公司通过我方介绍，获得了每年R公司50万欧元的订单。</li> 
					</ul>
				</div> -->
				<div class=' text-center' :class='{mt50:!Global.currentDevice,mt20:Global.currentDevice}'> 
					<button  class='method_button'><router-link  to='/contact_form'>{{AllData.btn}}</router-link></button>
				</div>
			</a-row>
		</div>
		<div v-else class="loginButton_bg">
			<div  class='login_button cursor'   @click='loginshow()'>
				{{AllData.btn_detail}}
			</div>
		</div>
	</div>
</template>

<script >
import breadcrumbs  from '@/components/breadcrumbs'
export default {
	name:'financing_two',
	props:{
		language:Object
	},
	data(){
		return {
			 
		}
	},
	methods:{
		loginshow(){
	         this.$store.commit("setloginFormShow",true)
	    },
	},
	computed:{
		userlogin(){
			return this.$store.state.token ? true:false
		},
		AllData(){
			return this.language.financing_two
		}
	},
	components:{
		breadcrumbs
	}
}
</script>

<style  scoped="scoped">


.main{width: 1200px;margin:0 auto;padding-bottom:50px;}


/*卡片介绍*/
.card-list {display: table;width: 103%;}
.card-list li{display: table-cell;width:33%; height: 144px;background: url(../assets/img/financing_bg_2.png) no-repeat ;padding: 30px 58px 30px 20px;margin-right: 20px;background-size: 89% 100%;} 
.card-list li p{line-height: 1.7;margin-top: 8px;color: #666;}
.card-list_title{padding-top: 76px;font-size: 20px;font-weight: 600; text-align: center;}
.card-list_title.one{background: url(../assets/img/adventure_2.png) no-repeat top center;}
.card-list_title.two{background: url(../assets/img/adventure_5.png) no-repeat top center;}
.card-list_title.three{background: url(../assets/img/adventure_6.png) no-repeat top center;}
.list_title-small{font-size: 16px;font-weight: 600;color:black;margin-top: 14px ;text-align: center;color: #2E4E7E}

/*融资流程图*/
.modal_introduce{padding: 30px 30px 180px;}
.financing_modal{display: table;width: 100%;}
.financing_modal li {display: table-cell; width: 20%;height: 155px; border-top:2px solid  #2E4E7E;position: relative;}
.financing_modal li .left_num{position: absolute; width: 24px;height: 24px;line-height: 24px;background: #2E4E7E;border-radius: 50%;color: #fff;text-align: center;right: 0;margin-right: -12px;top:-12px;z-index: 9;}
.financing_modal li .left_top{position: absolute;width:340px;text-align: center;right: -50%;margin-right: -58px;}
.financing_modal li .left_top.top{top:-42px;}
.financing_modal li .left_top.bottom{top:26px;} 

.financing_cost li{float: left;padding: 0 50px;}
 
/*移动端适配*/
@media(max-width: 420px){   
	.main{width: 100%;padding:10px 20px;} 
	img{width: 100%} 
	.span_title{font-size: 18px;line-height: 1.2}
	/*.card-list{padding-bottom: 60px;}*/
	.card-list li{float: left;width: 97%;padding: 10px;background-size: cover;margin-bottom: 20px;height: 220px;}

	.modal_introduce{padding: 10px 0;}
	.financing_modal li{height: 130px;}
	.financing_modal li .left_top{width:200px;margin-right: -44px;}

	.financing_cost li{padding: 0 20px;}
}
</style>